<template>
    <div class="box">
        <!-- 头部 -->
   <header>
       <!-- 返回 -->
                <van-nav-bar
       
        left-text=""
        
        left-arrow
        @click-left="onClickLeft"
       
        />
   </header>

   <!-- 中部 -->
   <section>
        <!-- 图片 -->
        <img class="tupian-y" :src="list.pimg"/>
      

<!-- 商品详情 -->
        <div class="details">
            <p>{{list.pname}}</p>
            <p>¥{{list.ppirce}}</p>
        </div>
        <div class="subtract">
            <p>数量</p>
            <van-stepper v-model="value"/>
        </div>
        <div class="choose">
            <van-slider v-model="value1" :min="0" :max="99" />
            <ul>
                <li>30cm</li>
                <li>40cm</li>
                <li>50cm</li>
                <li>60cm</li>
                <li>70cm</li>
            </ul>
        </div>
        <div class="round">
            <p>颜色</p>
            <ul>
                <li name="blue"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="address">
            <p>配送至</p>
            <p>广东省深圳市南山区一隅清欢设计工作室</p>
        </div>
   </section>

   <!-- 底部 -->
   <footer>
        <div class="queren">
            <p @click="todo()">确认</p>
        </div>
   </footer>
        

       
        
       
    </div>
</template> 
 

<script>
import Axios from 'axios';
export default {
    name:'buyinterface',
     data() {
        return {
        value: 1,
        value1:100,
        list:''
        }
    },
     methods: {
      tap() {
      this.$router.go(-1);
    },
     onChange(value1) {
      
    },
     onClickLeft() {
     this.$router.go(-1)
    },
    todo(){
        this.$router.push('/productdetails')
    }
  },
  mounted() {
      let that = this
      Axios({
          url:'http://jx.xuzhixiang.top/ap/api/detail.php',
          params:{id:30708}
      }).then(function(data){
        that.list = data.data.data
      })
  },
}
</script>

<style scoped>
.box{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:100%;
}

/* 头部 */
header{
    width: 375px;
    height: 42px;
}
/* 返回 */
.van-nav-bar{
    width: 375px;
    height: 42px;
    line-height: 42px;
    background-color:#ffffff;
    color: #000000;
    font-size: 14px;
    font-family: Arial;
}
.van-icon{
     color: #000000;
     font-weight: bolder
}



/* 中部 */
section{    
    flex: 1;
}
/* 图片 */
.tupian-y{
    width: 375px;
    height: 322px;
    border: none;
}


/* 商品详情 */
.details{
    height:35px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    padding:5px 35px;
}
.subtract{
    height:30px;
      display: flex;
      padding:5px 35px;
      margin-top: 30px
}
.subtract p{
    margin-right: 15px;
    line-height: 24px
}

/* 加减 */
.van-stepper{  
    background-color: rgba(255, 255, 255, 0);
    color: rgba(106, 106, 106, 1);
    font-size: 22px;
    text-align: center;
    font-family: Arial;   
}

.van-stepper__minus{
    width: 32px;
    height: 34px;
    line-height: 32px;
    background-color: #ffffff;
    color: rgba(106, 106, 106, 1);
    font-size: 22px;
    text-align: center;
    font-family: Arial;
}
.spinbutton{
    width: 32px;
    height: 34px;
    line-height: 32px;
    background-color: #ffffff;
    color: rgba(106, 106, 106, 1);
    font-size: 22px;
    text-align: center;
    font-family: Arial;
}
.van-stepper__plus{
    width: 32px;
    height: 34px;
    line-height: 32px;
    background-color: #ffffff;
    color: rgba(106, 106, 106, 1);
    font-size: 22px;
    text-align: center;
    font-family: Arial;
}

/* 尺寸 */
.choose{
    height:30px;
    padding:5px 35px;
    margin-top: 20px
}
.choose ul{
    height:28px;
    width: 100%;
    display: flex;
    align-items: center
}
.choose li{
    width:55px;
    margin-left:5px;
    float: left;
}
.round{
    height:56px;
    margin-left:35px;
}
.round p{
  
width: 56px;
height: 34px;
line-height: 34px;
color: rgba(106, 106, 106, 1);
font-size: 14px;
text-align: left;
font-family: Arial;
}
.round ul{
height:20px;
}
.round li{
width:20px;
height:20px;
background:#ccc;
float: left;
margin:0 10px;
border-radius: 50% ;
}
.round li:nth-of-type(1){
    background:cornflowerblue;
}
.round li:nth-of-type(2){
    background:pink;
}
.round li:nth-of-type(3){
    background:orange;
}
.address{
    height:40px;
    padding:5px 35px;
   
}
/* 底部 */
footer{
    width: 374px;
    height: 70px;
    line-height: 14px;
    border-radius: 14px;
    text-align: center;
    padding-top: 14px;
    box-sizing:border-box
}
.queren{
    width:375px;
    height:55px;
    background:#c6c6c6;
    border-radius: 10px;
}
.queren p {
    font-size: 22px;
    line-height: 55px;
    text-align: center;
    margin-bottom: 0px;
}
</style>